<template>
	<view>
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center">题目内容</uni-th>
					<uni-th width="80" align="center">错误次数</uni-th>
					<uni-th width="120" align="center">更新时间</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in list" :key="index" @click="showDetail(item)">
					<uni-td>
						<view class="name" @click="showDetail(item)">{{ item.title }}</view>
					</uni-td>
					<uni-td>
						<view class="name">{{ item.wrongCount }}</view>
					</uni-td>
					<uni-td align="center">{{ dayjs(item.updateTime).format('YYYY-MM-DD HH:mm') }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view style="margin: 10px;"><uni-pagination show-icon :page-size="10" :current="query.current" :total="total"
				@change="load" /></view>



		<block v-if="show">
			<tn-popup mode="bottom" v-model="show" mask closeBtn length="75%">
				<view class="tn-margin-sm" style="margin-top: 35px;">
					<tn-list-view :card="true" :title="title" backgroundColor="#EFEFEF">
						<image style="width: 100%;" v-if="currentItem.image" src="currentItem.image"></image>
						<block v-if="currentItem.quType===1||currentItem.quType===3">
							<tn-radio-group width="100%" v-model="answer" wrap style="width: 100%;">
								<tn-list-cell v-for="(item,index) in currentItem.answerList" :key='index'>
									<tn-radio :name="item.id">
										<view class="tn-padding-sm">
											{{item.content}}
										</view>
									</tn-radio>
									<view class="tn-margin" v-if="item.image">
										<image style="width: 100%;" v-if="item.image" src="currentItem.image"></image>
									</view>
								</tn-list-cell>
							</tn-radio-group>
						</block>
						<block v-if="currentItem.quType===2">
							<tn-checkbox-group v-model="answer" style="width: 100%;" width="100%" wrap>
								<tn-list-cell v-for="(item,index) in currentItem.answerList" :key='index'>
									<tn-checkbox :name="item.id" :value="item.checked">
										{{item.content}}
									</tn-checkbox>
									<view class="tn-margin" v-if="item.image">
										<image style="width: 100%;" v-if="item.image" src="currentItem.image"></image>
									</view>
								</tn-list-cell>
							</tn-checkbox-group>
						</block>

					</tn-list-view>

					<tn-list-view :card="true" title="整题解析：" backgroundColor="#EFEFEF">
						<tn-list-cell>
							{{
								currentItem.analysis===''?'暂无解析内容！':currentItem.analysis
							}}
						</tn-list-cell>
					</tn-list-view>

					<tn-list-view :card="true" title="选项解析：" backgroundColor="#EFEFEF">
						<tn-list-cell  v-for="(item,index) in currentItem.answerList" :key='index'>
							<view>{{item.content}}：</view>
							<view style="color: #00aa7f;">
								{{
									item.analysis===''?'暂无解析内容！':item.analysis
								}}
							</view>
							
						</tn-list-cell>
					</tn-list-view>
				</view>
			</tn-popup>
		</block>

	</view>
</template>

<script>	
import dayjs from 'dayjs'
	import {
		wrongBook,
		wrongBookDetail
	} from '@/api/exam.js'
	export default {
		data() {
			return {
				loading: false,
				total: 0,
				list: [],
				show: false,
				currentItem: {},
				title: null,
				answer: '',
				query: {
					current: 1,
					size: 10,
					params: {
						examId: null,
						title: '',
					}
				}

			}
		},
		onLoad(options) {
			if (options.examId) {
				this.query.params.examId = options.examId
				this.load()
			}
		},
		methods: {
			dayjs,
			load(val) {
				if (val && val.current) {
					this.query.current = val.current
				} else {
					this.query.current = 1
				}
				wrongBook(this.query).then(res => {
					this.list = res.data.records
					this.total = res.data.total
				})
			},
			showDetail(t) {
				wrongBookDetail({
					id: t.quId
				}).then(res => {
					this.show = true
					this.currentItem = res.data
					if (res.data.quType === 1) {
						this.answer = ''
						this.title = '【单选题】' + res.data.content
						for (var i = 0; i < res.data.answerList.length; i++) {
							let item = res.data.answerList[i]
							if (item.isRight) {
								this.answer = item.id
							}
						}
					}
					if (res.data.quType === 2) {
						this.answer = []
						this.title = '【多选题】' + res.data.content
						for (var i = 0; i < res.data.answerList.length; i++) {
							let item = res.data.answerList[i]
							if (item.isRight) {
								this.answer.push(item.id)
							}
						}
					}
					if (res.data.quType === 3) {
						this.answer = ''
						this.title = '【判断题】' + res.data.content
						for (var i = 0; i < res.data.answerList.length; i++) {
							let item = res.data.answerList[i]
							if (item.isRight) {
								this.answer = item.id
							}
						}
					}
				})
			},
		}
	}
</script>

<style>

</style>